<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title border-bottom">
                        <div class="title">订单详情 </div>
                    </div>
                    <div class="order_content">
                        <div class="order_content_show">      
                            <!-- 订单详情-商品 -->
                            <div class="order_goods_content">
                                <div class="order_goods_list">
                                    <div class="order_goods_info">
                                        <div class="order_goods_img">
                                            <img src="@/assets/images/img.png">
                                        </div>
                                        <div class="goods_spec_info">
                                            <div class="goods_name">同种异体肌腱</div>
                                            <div>型号：150680431530</div>
                                            <div>规格：200x20x5mm</div>
                                            <div>备注：多种产品规格满足临床不同需求</div>
                                        </div>
                                    </div>
                                    <div class="company_name">北京鑫康辰医学科技发展有限公司</div>
                                    <div class="goods_price">￥230.00</div>
                                    <div class="car_num_operate">10</div>
                                    <div class="goods_price_all">￥2300.00</div>
                                </div>
                                <div class="order_goods_list">
                                    <div class="order_goods_info">
                                        <div class="order_goods_img">
                                            <img src="@/assets/images/img.png">
                                        </div>
                                        <div class="goods_spec_info">
                                            <div class="goods_name">同种异体肌腱</div>
                                            <div>型号：150680431530</div>
                                            <div>规格：200x20x5mm</div>
                                            <div>备注：多种产品规格满足临床不同需求</div>
                                        </div>
                                    </div>
                                    <div class="company_name">北京鑫康辰医学科技发展有限公司</div>
                                    <div class="goods_price">￥230.00</div>
                                    <div class="car_num_operate">10</div>
                                    <div class="goods_price_all">￥2300.00</div>
                                </div>
                            </div>
                            <!-- 收货信息 -->
                            <div class="order-info-content">
                                <div class="order-title">收货信息</div>
                                <div class="order-info">
                                    <ul>
                                        <li><span>收货人</span>张三</li>
                                        <li><span>收货地址</span>北京市朝阳区清河营东路88号</li>
                                        <li><span>联系电话</span>15915815715</li>
                                    </ul>
                                </div>
                            </div>
                            <!-- 订单信息 -->
                            <div class="order-info-content">
                                <div class="order-title">订单信息</div>
                                <div class="order-info">
                                    <ul>
                                        <li><span>订单号</span>220109193821-OTUK-I-0114674</li>
                                        <li><span>订单时间</span>2022-03-15 15:29:02</li>
                                        <li><span>订单状态</span>待付款</li>
                                        <li><span>订单备注</span>公司内部使用，请将产品使用独立打包方式寄出。</li>
                                    </ul>
                                </div>
                            </div>
                            <!-- 物流信息 -->
                            <!-- <div class="order-info-content">
                                <div class="order-title">
                                    <span>物流信息</span>
                                    <div class="order-title-right"><nuxt-link to="/">物流跟踪</nuxt-link></div>
                                </div>
                                <div class="order-info">
                                    <ul>
                                        <li><span>发货方式</span>快递</li>
                                        <li><span>物流公司</span>顺丰快递</li>
                                        <li><span>订单状态</span>待审核</li>
                                        <li><span>运单号码</span>150680431530 </li>
                                    </ul>
                                </div>
                            </div> -->
                            <!-- 商品总价 -->
                            <div class="order-price-all">
                                <div class="price-all">
                                    <p><span>商品总价：</span><span>￥5700.00</span> </p>
                                    <p><span>运费(快递)：</span><span>￥0.00</span> </p>
                                    <p class="text-blue"><span>实付总额：</span><span>￥5700.00</span> </p>
                                </div>
                            </div>
                            <div class="btn-group">
                                <div class="time-remaining">
                                    支付时间剩余：<span class="text-blue">13小时21分292秒</span>
                                </div>
                                <el-button class="btn-white" round @click="openDialogCancelVisible">取消订单</el-button>
                                <el-button class="btn-main" round @click="openDialogReceiptVisible">上传付款回执</el-button>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>
        <!-- 取消订单弹窗 -->
        <el-dialog
            title="取消订单"
            :visible.sync="dialogCancelVisible"
            width="35%"
            :close-on-click-modal="false"
            top="7%">
            <div class="dialog-content">
                <el-form ref="form" :model="form" label-width="150px" label-position="left">
                    <el-form-item label="取消理由" required="">
                        <el-select v-model="form.reason" placeholder="请选择取消订单的理由">
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in reasonList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="cancel-text">
                        <span class="el-icon-warning"></span>您确定要取消订单吗？取消订单后不能恢复。
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmit">确定</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
        <!-- 取消订单弹窗 结束 -->

        <!-- 上传付款回执弹窗 -->
        <el-dialog
            title="上传付款回执"
            :visible.sync="dialogReceiptVisible"
            width="35%"
            :close-on-click-modal="false"
            top="2%">
            <div class="dialog-content payment-receipt">
               <div class="title">企业信息</div>
               <div class="item">
                   <p><span>账号名称</span>北京鑫康辰医学科技发展有限公司</p>
                   <p><span>开户银行</span>中国农业银行北京经济技术开发区支行</p>
                   <p><span>银行账号</span>11221201040008406</p>
               </div>
               <div class="title">订单信息</div>
               <div class="item">
                   <p><span>订单详情</span>同种异体肌腿 x10EH复合材料(颅领优) x10</p>
                   <p><span>订单号</span>220109193821-OTUK-1-0114674</p>
                   <p><span>订单时间</span>2022-03-1515:29:02</p>
                   <p><span>订单总额</span>￥5700.00</p>
               </div>
               <div class="title">支付信息</div>
               <el-form ref="form" :model="form" label-width="150px" label-position="left">
                    <el-form-item label="使用余额支付">
                        <el-input v-model="form.balance" placeholder=""></el-input>
                        <span class="el-icon-warning text-grey"></span> <span class="text-grey">账户剩余余额: ￥4150.00</span>
                    </el-form-item>
                    <el-form-item label="还需付款金额">
                        <el-input v-model="form.name" placeholder="￥5700.00"></el-input>
                    </el-form-item>
                    <el-form-item label="上传付款回执">
                        <CustomImageUpload v-model="form.remaining"></CustomImageUpload>
                        <span class="text-grey">支持pdf、jpg、png格式文件大小不超过5MB</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <!-- 上传付款回执 结束 -->
    </div>
</template>

<script>

  export default {
    data() {
        return {
            dialogReceiptVisible: false,
            dialogCancelVisible: false,
            form: {},
            reasonList: [],
        };
    },
    methods: {
        onSubmit(){

        },
        openDialogCancelVisible: function () {
            this.dialogCancelVisible = true;
        },
        openDialogReceiptVisible: function () {
            this.dialogReceiptVisible = true;
        },
    },
    mounted: function(){

    }

  };
</script>
<style>


</style>